/**
 * @author of2470
 *@date 2017/4/25
 *@description
 */
import * as React from "react";
import { Relax } from "iflux2";
import { List, Map } from "immutable";
import { Modal, message } from "antd";
import { applyTpl } from "../../common/template-common";
import { getEnvXSite } from "x-site-util";
import "../style/pad-modal.less";
import { getSystemCodeZip } from "../../common/const-value";
import GaUtil from "common-util/ga-util";

declare let window: any;
const SystemCodeZip = getSystemCodeZip();
@Relax
export default class PageModalWx extends React.Component<any, any> {
  constructor(props) {
    super(props);
    this.state = {
      activeKey: "1"
    };
  }

  static defaultProps = {
    visible: false,
    changeModalStatus: () => {},
    templateList: List(),
    pageTypeBtns: List(),
    getTemplateList: () => {},
    getActivatedPageInfo: () => {},
    getPageList: () => {},
    activatedPageInfo: Map()
  };

  componentDidMount() {
    if (!window.isUpdating) {
      this.props.getActivatedPageInfo();
    }
  }

  render() {
    let templateArea = this.props.templateList.map(template => {
      template = template.toJS();
      return (
        <li className="page-modal-li" key={template.id}>
          <img
            className="page-img"
            src={template.detailInfo && template.detailInfo.detailImage}
            alt=""
          />
          <p className="page-title">
            {template.templateName_cn}
          </p>
          <div className="page-li-img-mask" />
          <div
            className="page-modal-button-apply"
            onClick={this._applyTpl.bind(this, template)}
          >
            应用
          </div>
          <div
            className="page-modal-button-preview"
            onClick={this._previewTpl.bind(this, template)}
          >
            预览
          </div>
        </li>
      );
    });
    return (
      <div style={{ minHeight: "724px" }}>
        <Modal
          visible={this.props.visible}
          width="900px"
          footer={null}
          maskClosable={true}
          onCancel={this.handleCancel}
        >
          <div className="pad-modal-wx-title">
            <ul>
              {templateArea}
              <li className="page-modal-li">
                <img
                  className="page-img"
                  style={{ marginBottom: "36px" }}
                  src="//qianmi-web.oss-cn-hangzhou.aliyuncs.com/x-site/public/x-site-ui-pad/statics/preview/pad/tplImage.jpg"
                />
              </li>
            </ul>
          </div>
        </Modal>
      </div>
    );
  }

  //预览模板
  _previewTpl = templateInfo => {
    let url = templateInfo.detailInfo.previewHtml;
    let host = getEnvXSite();
    host = host.indexOf("http://") < 0 ? host.replace("//", "http://") : host;
    if (["weixin"].indexOf(templateInfo.platForm) >= 0) {
      url =
        host +
        "/wxpreview?url=" +
        encodeURIComponent(url) +
        (["custom", "article", "liveShow"].indexOf(templateInfo.pageType) >= 0
          ? "&title=" +
            (templateInfo.templateName_cn || templateInfo.templateName)
          : "") +
        "&sc=" +
        SystemCodeZip;
    }
    if ("pad".indexOf(templateInfo.platForm) >= 0) {
      url =
        "http://qianmi-web.oss-cn-hangzhou.aliyuncs.com/x-site/public/x-site-ui-pad/statics/preview/pad/index.html";
    }
    //http://x-site.qianmi0.com:3000/exhibition?platForm=pad&pageType=index&pageCode=1499677875153&userTitle=&sc=H4sIAAAAAAAAA0sxSg4uyS9KBQDJOKt4CAAAAA==
    window.open(url);
    GaUtil.addPageEvent({
      eventAction: "预览模板",
      eventLabel: templateInfo.templateCode,
      platform: this.props.platform
    });
  };

  //关闭模态框
  handleCancel = () => {
    this.props.getPageList({
      platform: this.props.platform,
      pageNo: 0,
      pageSize: 10
    });
    this.props.changeModalStatus(false);
    this.setState({ activeKey: "1" });
  };

  //应用模板
  _applyTpl = templateInfo => {
    let url = applyTpl(templateInfo, SystemCodeZip);
    window.open(url);
    GaUtil.addPageEvent({
      eventAction: "应用模板",
      eventLabel: templateInfo.templateCode,
      platform: this.props.platform
    });
  };
}
